<template>
    <div id="cardarticle">
        <head-tip title='文章详情' :isback=true>
        </head-tip>
        <section class="content">
            <div class="word-detail">
                <div class="contentBox">
                    <p class="word-detail-title">{{curArtData.ctitle}}</p>
                    <p class="word-detail-other">
                        <span>{{curArtData.atime}}</span>
                        <span>来源：<span style="color:#617c8c;" @click="toCard(defaultCard)">{{defaultCard.cchildname}}</span></span>
                        <span v-if="uid==curArtData.uid" @click="toEdit(curArtData.id)">编辑</span>
                    </p>
                    <div v-html="curArtData.ccontent" class="word-detail-content"></div>
                    <div class="lookandreply">
                        <span>浏览数:{{curArtData.icount}}</span>
                        <span @click="togZan(curArtData.id,curArtData.atid)"><i :class="{zaned:iszan,zaning:!iszan}" class="iconfont icon-dianzan"></i><span style="font-size:1.2rem;">&nbsp;{{iatcount}}</span></span>
                    </div>
                </div>
                <div class="commentBox">
                    <div class="lookandreply">
                        <span>精选留言</span>
                        <p @click="toComment" class="word-comment-title">写留言</p>
                    </div>
                    <el-collapse-transition>
                        <div class="sendBox" v-show="mainSend">
                            <textarea placeholder="说点什么吧..." v-model="content" class="textReply" name="" id=""></textarea>
                            <div class="csboth"><span @click="cancel">取消</span><span @click="sendcomment">发送</span></div>
                        </div>
                    </el-collapse-transition>
                    <ul id="curArtData" class="data-list">
                        <li v-for="(item,k) in curArtData.comments" v-if="!item.ireplyuid" :key="k" class="word-commentone">
                            <!-- comment -->
                            <p class="word-username clearfix">
                                <img :src="decodeURIComponent(item.cheadimage)">
                                <label class="uname" style="height: 37.875px; line-height: 37.875px;">{{item.crealname?decodeURIComponent(item.crealname):item.cuserid}}</label>
                            </p>
                            <p @click="toComment(item,curArtData.comments)" class="word-comment-detail">{{item.content}}</p>
                            <p class="btime">{{item.btime}}</p>
                            <el-collapse-transition>
                                <div class="sendBox" v-if="item.isOpenText">
                                    <textarea placeholder="说点什么吧..." v-model="content" class="textReply" name="" id=""></textarea>
                                    <div class="csboth"><span @click="cancel(item,curArtData.comments)">取消</span><span @click="sendcomment(item)">发送</span></div>
                                </div>
                            </el-collapse-transition>
                            <!-- comment -->
                        </li>
                        <li v-else class="word-commentone">
                            <!-- reply -->
                            <p class="word-username clearfix">
                                <img :src="decodeURIComponent(item.cheadimage)">
                                <label class="uname" style="height: 37.875px; line-height: 37.875px;">{{item.crealname?decodeURIComponent(item.crealname):item.cuserid}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{item.creplyrealname?decodeURIComponent(item.creplyrealname):item.cuserid}}</label>
                            </p>
                            <p @click="toComment(item,curArtData.comments)" class="word-comment-detail">{{item.content}}</p>
                            <p class="btime">{{item.btime}}</p>
                            <el-collapse-transition>
                                <div class="sendBox" v-if="item.isOpenText">
                                    <textarea placeholder="说点什么吧..." v-model="content" class="textReply" name="" id=""></textarea>
                                    <div class="csboth"><span @click="cancel(item,curArtData.comments)">取消</span><span @click="sendcomment(item)">发送</span></div>
                                </div>
                            </el-collapse-transition>
                            <!-- reply -->
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <div class="footNav" v-if="isClosefoot">
            <i><img style="width:2.5rem;margin-top:0.25rem;border-radius:0.5rem;" src="../../assets/image/h4.jpg" alt=""></i>
            <span>去发文...</span>
            <div class="bothCreateAndSend">
                <span @click="tohome">回首页</span>
                <span @click="toAddArt" v-if="hascard">发文章</span>
                <span @click="toaddcard" v-else>建名帖</span>
            </div>
            <span @click="toClose"><i class="el-icon-close"></i></span>
        </div>
    </div>
</template>

<script>
import headTip from '@/components/common/head'
import fetch from '@/config/fetch.js'
import {fetchLogin} from '../../config/fetch.js'
import {getCardById,isCreateCard,getArtDetail} from '@/js/dataServe.js'

export default {
    data () {
      return {
        uid:sessionStorage.uid,
        isClosefoot:true,
        iatcount:'',
        iszan:false,
        content:'',
        mainSend:false,
        defaultCard:{},//默认来源名帖
        hascard:false,
        curArtData:{},
        commentList:[],
        domainName:'http://card.adouyun.com:80/CloudCard',
      };
    },
    methods:{
        toEdit(id){
            this.$router.push({path:'/card/addArticle',query:{artid:id}})
        },
        toClose(){
            this.isClosefoot = false;
        },
        toAddArt(){
            this.$router.push({path:'/card/addArticle'})
        },
        tohome(){
            this.$router.push({path:'/search'})
        },
        toaddcard(){
            this.$router.push({path:'/mine/addCard?type=3'})
        },
        async togZan(artid,zanid){//
            let self = this;
            if(zanid!=null){
                var url = '/thumbup/cancelThumbUp'
                var sendData = {
                    id:zanid
                }
            }else{
                var url = '/thumbup/saveThumbUp'
                var sendData = {
                    iarticleid : artid
                }
            }

            let responseData = fetch(url,sendData,'POST')
            await responseData.then((res)=>{
                if(res.result==1){
                    self.$message({
                                duration:2000,
                                message: '操作成功',
                                type: 'success'
                            })    
                    self.iszan=!self.iszan 
                    if(zanid!=null){
                        self.iatcount--
                        self.curArtData.atid = null
                    }else{
                        self.iatcount++
                        self.curArtData.atid = res.data.id
                    }              
                }else{
                    self.$message({
                                duration: 2000,
                                message: res.msg,
                                type: 'error'
                            })
                }
            })

        },
        sendcomment(item){
            let iarticleid=this.$route.query.id
            let self = this
            if(item.id || item.id==0){
                var ireplyid = item.id
            }else{
                var ireplyid = ''
            }
            if(self.content == ''){
                alert('请输入内容！')
                return false;
            }
            let sendjson={iarticleid:iarticleid,ireplyid:ireplyid,content:self.content}
            let responseData = fetch('/comment/saveComment',sendjson,'POST')
            responseData.then((res)=>{
                if(res.result==1){
                    self.$message({
                                duration:2000,
                                message: '保存成功',
                                type: 'success'
                            })    
                    if(item.id){
                        item.isOpenText = false;
                    }else{
                        self.mainSend = false;
                    }
                    res.data.btime = self.timeBetween(res.data.ddate)
                    res.data.isOpenText = false
                    self.curArtData.comments.push(res.data)
                }else{
                   self.$message({
                                duration: 2000,
                                message: res.msg,
                                type: 'error'
                            })
                }
            })
        },
        toComment(item){
            let self = this;
            self.content = '';
            self.mainSend = false;
            self.curArtData.comments.forEach((v,k)=>{
                v.isOpenText = false;
            })
            if(item.id){
                item.isOpenText = true;
            }else{
                self.mainSend = true;
            }
            
        },
        //取消评论
        cancel(item){
            console.log(66)
            let self = this;
            self.content = '';
            if(item.id){
                item.isOpenText = false;
            }else{
                self.mainSend = false;
            }
        },
        getData(curData,page){
            var _this=this
            var thisData=curData  
            if(thisData.ddate){
                thisData.atime=_this.timeDate(thisData.ddate,2)
            }
            if(thisData.comments){
                thisData.comments.forEach(function(v,k){
                    if(v.ddate){
                        v.btime=_this.timeBetween(v.ddate)
                    }
                })
                // thisData.comments=thisData.comments.reverse()
            }
            thisData.comments.forEach((v,k)=>{
                v.isOpenText = false
            })
            if(thisData.atid!=null){
                _this.iszan = true;
            }
            _this.iatcount = thisData.iatcount
            _this.curArtData=thisData
        },
        toCard(item){
            let self = this;
            if(item.itype == 0){
                self.$router.push({path:'/card/companyCard',query:{id:item.ichildid,uid:item.ichilduid}})
            }else{
                self.$router.push({path:'/card/personCard',query:{id:item.ichildid,uid:item.ichilduid}})
            }
              
        }
    },
    components:{
        headTip
    },
    async mounted(){
        let self = this;
        //判断当前用户是否拥有名帖
        if(!sessionStorage.userinfos){
            let responseData = fetchLogin('/user/ssoLogin.shtml?sessionid='+sessionStorage.sid,{},'GET');
            await responseData.then((res)=>{
                                if(res.result==1){
                                    let headimg=res.data.user.cheadimage;
                                    if(headimg.indexOf('http:')==-1){
                                        headimg=decodeURIComponent(headimg);
                                    }
                                    sessionStorage.setItem('uimg',headimg);
                                    sessionStorage.setItem('username',res.data.user.crealname);
                                    let infostring=JSON.stringify(res.data.infos);
                                    sessionStorage.setItem('userinfos',infostring);
                                }else{
                                    self.$message({
                                        duration: 2000,
                                        message: res.msg,
                                        type: 'error'
                                    })
                                    return false
                                }
                            })
        }
        let userInfo = JSON.parse(sessionStorage.userinfos)
        if(userInfo.icardcount>0){
            self.hascard = true
        }else{
            self.hascard = false
        }
        let responseArt = getArtDetail(self.$route.query.id);
        await responseArt.then((res)=>{
            if(res.result==1){
                let CurData=res.data
                let shareImg='';
                self.getData(CurData);
                if(CurData.attachs && CurData.attachs.length>0){
                    shareImg =self.domainName+CurData.attachs[0]['cpath']+CurData.attachs[0]['cfilename'];
                }else{
                    shareImg = decodeURIComponent(CurData.cheadimage);
                    
                }
                //分享信息
                var shareData={
                    title:CurData.ctitle,
                    desc:`流名帖-`+decodeURIComponent(CurData.crealname)+`的文章` +`\r\n  \r\n `,
                    qtitle:CurData.ctitle,
                    img:shareImg
                }
                sessionStorage.setItem('shareData',JSON.stringify(shareData))
            }else{
                alert(res.msg);
            }
        })
        self.defaultCard = self.curArtData.cards[0];
                    
    }
}
</script>

<style >
.word-detail-content img{
    max-width:100%;
}

</style>
<style scoped>
    .zaned{
        color:#00AA76;
    }
    .zaning{
        color:#ddd;
    }
    .sendBox{
        box-sizing: border-box;
    }
    .textReply{
        width: 100%;
        border: none;
        border-radius: 0.5rem;
        height: 8rem;
        padding:1rem;
        font-size: 1rem;
        color:#666666;
        box-sizing: border-box;
    }
    .csboth{
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #d6d6d6;
        height: 3rem;
        line-height: 3rem;
    }
    .csboth span{
        margin-left:1rem;
    }
    textarea{outline:none}
    textarea{resize:none}
    .comment-popup{color: #666;line-height: 3.6rem;height: 3.6rem;background: #2790A6;width: 100%;}
    #reply-input{border-radius: 5px;outline: 0;width: 70%;height: 2.35rem;margin-left: 2%;border: 0;margin-top: .65rem;padding-left: 10px;float: left;font-size: .8rem;}
    #reply-submit{background: #FFF;width: 18%;float: right;height: 2.35rem;margin-right: 2%;text-align: center;margin-top: 10px;line-height: 2.35rem;border-radius: 5px;color: #2790A6;}
    section{margin-top:44px}
    .word-detail .contentBox {
        padding: 0 1rem;
    }
    .word-detail .contentBox p.word-detail-title {
        font-size: 1.5rem;
        color: #303133;
        margin-bottom: 10px;
        border-bottom: solid 0.01rem #ddd;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .word-detail .contentBox p.word-detail-other {
        margin: 1em 0;
    }
    .word-detail .contentBox p.word-detail-other span {
        display: inline-block;
        margin-right: 20px;
        font-size: 14px;
        color: #999;
    }
    .word-detail .commentBox{
        margin-top: 1.5rem;
        background: #eee;
        padding: 0 1rem 5rem 1rem;
    }
    .word-detail .commentBox p.word-comment-title {
        font-size: 1rem;
        line-height: 20px;
    }
    .word-detail .commentBox ul {
        padding: 0 5px;
    }
    .word-detail .commentBox ul li.word-commentone {
        display: block;
        width: 100%;
        height: auto;
        border-bottom: solid 0.01rem #ddd;
        padding-top: 12px;
    }
    .word-detail .commentBox ul li.word-commentone p {
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 15px;
    }
    .word-detail .commentBox ul li.word-commentone p {
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 15px;
    }
    .word-detail .commentBox ul li.word-commentone .btime {
        font-size: 12px;
        color: #999;
    }
    .word-detail .commentBox ul li.word-commentone .word-username img {
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .word-detail .commentBox ul li.word-commentone label.uname {
        font-weight: bold;
        float: left;
        width: auto;
    }
    .lookandreply{
        display: flex;
        padding: 1rem 0;
        justify-content: space-between;
        align-items: center;
    }
    .icon-dianzan{
        font-size:1.4rem;
    }
    .footNav{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3rem;
        background: rgba(0,0,0,0.4);
        color: #fff;
        display: flex;
        line-height: 3rem;
        justify-content: space-between;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .bothCreateAndSend{
        display: flex;
    }
    .bothCreateAndSend span{
        height: 2rem;
        margin-top: 0.5rem;
        line-height: 2rem;
        background: #00AA76;
        margin-left: 1rem;
        border-radius: 0.25rem;
        padding: 0 1rem;
    }
</style>
